<template>
  <div>
    <el-container>
      <el-header>
        <Nav>
            <i @click="goback" class="el-icon-arrow-left" slot="icon"></i>
            <el-input slot="input" class="input-col" suffix-icon="el-icon-search" v-model="input" placeholder="请输入内容"></el-input>
        </Nav>
      </el-header>
      <el-main>
        <div class="left">
            <Left-Button></Left-Button>
        </div>
        <div class="right">
            <ListClassify></ListClassify>
        </div>
      </el-main>
      <el-footer>
        <Footer-Box>

        </Footer-Box>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { Nav } from "../nav/index.js";
import { FooterBox } from "../footerBox/index.js";
import { LeftButton } from "../leftButton/index.js";
import { ListClassify } from "../list/index.js";
export default {
    data() {
        return {
            input:''
        }
    },
    components: {
      Nav,
      FooterBox,
      LeftButton,
      ListClassify
    },
    methods: {
        goback() {
            this.$router.push('/')
        }
    },
};
</script>

<style scoped>
.nav-box{
    background-color: #fff;
    border-bottom: 1px solid #C2C8D1;
}
.el-header{
    height: 45px !important;
}
.el-footer {
  height: 50px !important;
  width: 100vw;
  position: fixed;
  bottom: 0px;
  z-index: 1000;
  padding: 0px;
}
.footer-box{
    width: 100%;
    height:13.333vw;
    background-color: #fff;
    display: flex;
}
.footer-box a{
    width: 25%;
    height: 100%;
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
i{
    color : rgba(0,0,0,0.5);
    font-size: 30px;
}
.active{
    color: #F53F3F;
}
.el-icon-arrow-left{
    font-size: 25px;
    color: #252525;
}
.input-col{
    padding: 7px 0px !important;
    box-sizing: border-box;
}
.input-col >>> .el-input__inner{
    height: 30px;
    border-radius: 20px;
}
.el-container{
    display: flex;
    height: 100vh;
}
.el-main{
    flex-grow: 1;
    display: flex;
}
.left{
    height: 100%;
    width: 22.7%;
    background-color: #f4f5f5;
    font-size: 16px;
    flex-shrink: 0;
}
.right{
    height: 100%;
    overflow: scroll;
}
</style>